import {Component} from 'react'
import ReactDOM from 'react-dom'
import Taro from '@tarojs/taro'
import {View, Text, Image, Block} from '@tarojs/components'
import {AtAccordion} from 'taro-ui'
import 'taro-ui/dist/style/index.scss'
import {
  AtButton, AtSearchBar, AtList, AtListItem, AtCard, AtIcon, AtCalendar,
  AtTabs, AtTabsPane, AtTabBar, AtTag, AtRate
} from 'taro-ui'

import "taro-ui/dist/style/components/button.scss" // 按需引入
import '../index/index.less'
import './appointment.less'

export default class Appointment extends Component {
  state = {
    value: "",
    current: 0,
    dataList: []
  }

  /*搜索*/
  onSearch(value) {
    this.setState({
      value: value
    })
  }

  onActionClick() {
    console.log('开始搜索')
  }

  /*页面切换*/
  handleClick(value) {
    this.setState({
      current: value
    })
  }

  /*跳转*/
  toAppointmentInfo(value) {
    console.log(value)
    Taro.navigateTo({
      url: '/pages/appointment/appointmentInfo?itemcode='+value
    })
  }

  handleSelectClick(value) {
    this.setState({
      open: value
    })
  }

  /*请求*/
  componentWillMount() {
    Taro.getStorage({
      key: '__itemcode__',
      success: (res) => {
        const itemcode = res.data;
        let page = 1
        Taro.request({
          url: `http://127.0.0.1:80/appointment/findAllHospital?page=` + page,
          header: {
            'content-type': 'application/json' // 默认值
          },
          method: 'GET',
          dataType: 'json',
          credentials: 'include',
          success: (res) => {
            this.setState({
              dataList: res.data.data
            })
          },
          fail: function (errMsg) {
            Taro.showToast({
              title: '服务器请求失败!',
              icon: 'none',
              duration: 3000
            })
          }
        });
      }
    })
  }

  render() {
    var tabList = [{title: "首页", iconType: "home"}, {title: "我的", iconType: "user"}]
    let dataList = this.state.dataList;//渲染数据
    return (
      <View className='appointment'>
        <AtTabBar
          fixed
          tabList={tabList}
          onClick={this.handleClick.bind(this)}
          current={this.state.current}
        />
        <AtTabs current={this.state.current} onClick={this.handleClick.bind(this)}>
          <AtTabsPane current={this.state.current} index={0}>
            <View style='padding: 10px 0px;background-color: #FAFBFC;text-align: center;'>
              <AtSearchBar
                actionName='搜索'
                value={this.state.value}
                onChange={this.onSearch.bind(this)}
                onActionClick={this.onActionClick.bind(this)}
              />
              <AtList id='dataList' hasBorder={false}>
                <View className='listHeader'>
                  <View className='listHeaderLeft'>
                    <Text>按距离</Text>
                    <Image src={require('./u738.svg')} style='width:16px;height:16px;'/>
                  </View>
                  <View className='listHeaderRight'>
                    <Text>筛选</Text>
                    <Image src={require('./u735.svg')} style='width:16px;height:16px;'/>
                    <AtAccordion
                      open={this.state.open}
                      onClick={this.handleSelectClick.bind(this)}
                    >
                      <AtList hasBorder={false}>
                        <AtListItem
                          title='评分'
                          thumb='https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'
                        />
                        <AtListItem
                          title='剩余量'
                          thumb='http://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png'
                        />
                      </AtList>
                    </AtAccordion>
                  </View>
                </View>
                {
                  dataList.map((data, index) => {
                    return <Block>
                      <View className='my-card' onclick={this.toAppointmentInfo.bind(this,data.itemcode)}>
                        <View className='my-card-picture'>
                          <AtIcon></AtIcon>
                        </View>
                        <View className='my-card-item'>
                          <View className='my-info'>
                            <Text>{data.hospitalName}</Text>
                          </View>
                          <View className='my-info'>
                            <AtRate
                              value={data.hospitalSource}
                            />
                          </View>
                          <View className='my-info'>
                            <Text>剩余数 {data.hospitalBooking} 距离 0 </Text>
                          </View>
                        </View>
                      </View>
                    </Block>
                  })
                }

              </AtList>
            </View>
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={1}>
            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页二的内容</View>
          </AtTabsPane>
        </AtTabs>
      </View>
    )
  }
}
